<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器示例:</title>
  <style type="text/css">
    /* 带有title属性的元素 */
    [title]{
      color:red;
    }
    /* a标签且带有hred属性的元素 */
    a[href] {
      color:blue;
      text-decoration:none;
      border:1px solid black;
    }
    a[href][title] {background-color:green;color:white;}
    /* 示例1.只要包含value值就能设置样式表  */
    [title~=hello]{
      color:green;
      background-color: black;
    } 

    /* 示例2. 必须包含value为开头的单词或者本身才能设置样式表*/
    p[lang|=en]{
      color:green;
      border: 1px solid black
    }
  </style>
</head>
<body>
  
  <b>可以应用样式：</b>
  <h2 title="Hello World">Hello World</h2>
  <a href="http://weiyigeek.top" target="_blank" />利用属性选择器的样式</a>
  <a title="test" href="http://weiyigeek.top" target="_blank" />根据多个属性进行选择设置样式</a>
  <br><br>
  <b>无法应用样式：</b>
  <h2 name="Hello World">Hello world</h2>
  <a name="weiyigeek.top">weiyigeek.top</a>
  <hr>
  <!--含有 hello-->
<h2 title="hello world">Hello world</h2>  
<!--含有 hello-->
<p title="student hello">Hello weiyigeek students!</p>  

<hr>
  <h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<h1>无法应用样式：</h1>
<p lang="www en-us">属性没有以en为开头的本身或者单词</p>  
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>